<!-- 最近加速流量排名 -->
<template>
  <div class="wrap">
    <span class="title">top <span>10 </span> 最近加速流量排名</span>
    <div ref="linechart" id="chart1" :style="{ height: height, width: width }"/>
    <!-- <el-table stripe border :data="dataList" style="width: 100%; margin: 15px 0;">
      <el-table-column label="序号" width="50" align="center" type="index">
      </el-table-column>
      <el-table-column label="ip" align="center"  show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.Name }}
        </template>
      </el-table-column>
      <el-table-column label="加速流量" width="130" align="center">
        <template slot-scope="scope">
          {{ scope.row.Count }}
        </template>
      </el-table-column>
    </el-table> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { connrequest } from "@/api/firstPage";
import { getNowDay } from "@/utils/index.js";
export default {
  data() {
    return {
      width: "100%",
      height: "350px",
      dataList: []
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.getData();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.linechart);
      this.setOptions(this.dataList);
    },
    async getData() {
      let NowDay = getNowDay("time");
      const data = {
        Filter: {
          StartTime: NowDay,
          EndTime: "",
          SumCount: 9
        }
      };
      const res = await connrequest('GetShadowStreamSum', data);
      if (res.Data) {
        this.$nextTick(()=>{
          res.Data.map((item) => {
            // item.Count = item.Count.toLocaleString()
            // item.Count = item.Count > 1000 ? (item.Count / 1000 / 1000).toFixed(2) + "M" : item.Count / 1000 + "KB";
            item.value = item.Count
            item.name = item.Name
            return item;
          });
          this.dataList = res.Data;
          this.setOptions(this.dataList)
        })
      }
      else{
        this.$nextTick(()=>{
          const dom = document.getElementById('chart1');
          dom.innerHTML = '<div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>';
          dom.removeAttribute('_echarts_instance_');
        })
      }
    },
    setOptions(dataList) {
      this.chart.setOption({
        tooltip: {
          // trigger: "item",
          formatter:function(params){
            return `${params.marker}加速流量<br/> ${params.name} : ${params.value > 1000 ? (params.value / 1000 / 1000).toFixed(2) + "M" : params.value / 1000 + "KB"}`;  
          }  
        },
        legend: {
          bottom: "15%",
          top: "bottom",
          show: false
        },
        // graphic: {
        //     type: 'text',     // 类型：文本
        //     left: 'center',
        //     top: 'middle',
        //     silent: true,     // 不响应事件
        //     invisible: dataList.length !== undefined,   // 有数据就隐藏
        //     style: {
        //         fill: '#9d9d9d',
        //         fontWeight: 'bold',
        //         text: '暂无数据',
        //         fontFamily: 'Microsoft YaHei',
        //         fontSize: '25px'
        //     }
        // },
        series: [
          {
            name: "加速流量",
            type: "pie",
            radius: ["42%", "55%"],
            avoidLabelOverlap: true,
            itemStyle: {
              normal: {
                label: {
                  formatter: '{b} \n\n',
                  padding: [0, -55],
                  alignTo: 'labelLine'
                },
                labelLine: {
                  length2: 80
                }
              }
            },
            data: dataList
          }
        ]
      });
    }
  }
};
</script>
<style scoped lang='scss'>
.wrap {
  height: calc(50vh - 50px) !important;
  overflow: hidden;
}
</style>